<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="always">
      <div class="filter_header">
        <el-form ref="form" label-width="100px">
          <div class="monitor_page-filter" v-show="!isToggleStatus">
            <el-form-item label="起止时间：">
              <el-date-picker
                v-show="!isToggleStatus"
                style="width:100%;min-width:240px"
                size="small"
                value-format="timestamp"
                v-model="timerArray"
                type="datetimerange"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>

          <div class="monitor_page-filter flex-between filter_select" v-show="!isToggleStatus">
            <el-form-item label="轴方向：" style="margin-right: 20px">
              <el-select v-model.trim="CalcTypeModel" clearable placeholder="轴方向"
                         style="width: 120px;margin: 0 20px;margin-left: 2px" size="small">
                <el-option v-for="item in CalcTypeList" :key="item.code" :label="item.name"
                           :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="100px" label="频率速度：">
              <el-select v-model.trim="calcValModel" clearable placeholder="频率速度" @change="onChangeSd"
                         style="width: 120px;margin: 0 20px;margin-left: 2px" size="small">
                <el-option v-for="item in sdList" :key="item.code" :label="item.name"
                           :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
          <div class="monitor_page-filter-left">
            <button class="toggle_wrap" @click="toggleStatus">
              <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
            </button>
            <div v-show="!isToggleStatus">
              <el-button
                size="small"
                @click="confirmDelete"
                icon="el-icon-delete-solid"
                v-if="hasPermission('monitor:record:del')"
                type="danger">删除
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:mark')"
                type="primary"
                @click="showMonitorRemarkDialog">说明
              </el-button>
              <el-button
                size="small"
                style="margin-top: 10px"
                plain
                v-if="jiuGanKeJi"
                type="primary"
                @click="lookEquipRecord(timerArray,equipId)">运行日志
              </el-button>
            </div>
          </div>
          <el-button
            v-show="!isToggleStatus"
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            @click="form.page=1;$emit('update');onChangeSd(calcValModel)">搜索
          </el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="data"
        border
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column type="selection" width="28">
        </el-table-column>
        <el-table-column prop="createTime" label="数据采集时间" min-width="135">
          <template slot-scope="scope">
            {{scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>
        <el-table-column v-if="calcValModel === 1" key="2" prop="pl" label="振动频率(hz)" min-width="100"></el-table-column>
        <el-table-column v-else key="3" prop="sd" label="振动速度(cm/s)" min-width="100"></el-table-column>

        <!--        <el-table-column v-if="workPointTypeIsBuilding" prop="xyDisplacement" label="偏移位移(mm)" min-width="120">-->
        <!--        </el-table-column>-->
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
        layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>
    </el-card>

    <!-- 绘图部分 -->
    <div class="monitor_page-right">
      <el-card class="card_echarts " shadow="hover">
        <echarts-17-change1 ref="echartsChange1"></echarts-17-change1>
      </el-card>
      <el-card class="card_echarts " shadow="hover">
        <echarts-17-change2 ref="echartsChange2"></echarts-17-change2>
      </el-card>
    </div>

    <dialog-remark ref="remark" @update="$emit('update')"></dialog-remark>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
    <monitor-reset ref="monitorReset" @update="$emit('update')"></monitor-reset>
  </div>
</template>

<script>
  import Echarts17Change1 from '../monitor-echarts/base/echarts-17-1'
  import Echarts17Change2 from '../monitor-echarts/base/echarts-17-2'
  import ItemMixins from './item.mixins'
  import {store} from "../../work-point.store";

  export default {
    mixins: [ItemMixins],
    props: ['surfaceCalcType', 'calcVal'],
    components: {Echarts17Change1, Echarts17Change2},
    data() {
      return {
        dataList:[],
        sdList: [
          {code: 1, name: '频率'},
          {code: 2, name: '速度'},
        ],
        CalcTypeList: [
          {code: 1, name: 'X轴'},
          {code: 2, name: 'Y轴'},
          {code: 3, name: 'Z轴'},
        ],
        activeName: "1",
        // 当前的图表钩子
        chartsName: ['echartsChange1', 'echartsChange2'],
        // 分页参数
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        isShowDialog: false,
      }
    },
    computed: {
      data() {
        return this.dataList.slice((this.form.page - 1) * this.form.pageSize, this.form.page * this.form.pageSize)
      },
      CalcTypeModel: {
        get() {
          return this.surfaceCalcType;
        },
        set(value) {
          this.$emit("update:surfaceCalcType", value);
        },
      },
      calcValModel: {
        get() {
          return this.calcVal;
        },
        set(value) {
          this.$emit("update:calcVal", value);
        },
      },
      //工点类型是否是建筑物，建筑物不展示边坡相关的信息
      workPointTypeIsBuilding() {
        const {
          workPointId
        } = this.$route.params
        const info = store.workPointList.find(x => x.id === workPointId) || {}
        return info.bianpiType === 6
      },
    },
    methods: {
      onChangeSd(val){
        if(val === 1){
          this.dataList = this.collectionList.filter(i => i.pl != null)
        }else{
          this.dataList = this.collectionList.filter(i => i.sd != null)
        }
        this.form.page = 1;
        this.form.total = this.dataList.length
      },
      //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
      clickTab() {
        this.chartsName.map((name) => {
          if (this.$refs[name]) {
            this.$nextTick(() => {
              this.$refs[name].echartResize();
            });
          }
        });

      },
      // 数据刷新
      update({data, monitorName, monitorInfo}) {
        this.equipId = monitorInfo.bindEquipId
        this.collectionList = data.recordList
        this.form.page = 1;
        this.form.total = this.collectionList.length
        this.chartsName.map(async name => {
          this.$refs[name].updateEchart(data, monitorName, monitorInfo, this.CalcTypeModel)
        })
        this.onChangeSd(this.calcValModel)
      }
    }
  }
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  // 还需自定义的css
  .card_echarts {
    height: 550px;
  }

  .monitor_page-left {
    border: 1px solid #c00003;
  }

  .el-card {
    background: transparent;
  }
</style>
